<template>
    <div>
        <div class="login-container">
            <div style="width: 350px" class="login-box">
                <div style="font-weight: bold; font-size: 24px; text-align: center;margin-bottom: 30px;">自如房屋租赁平台登录
                </div>
                <el-form :model="data.form" ref="formRef" :rules="rules">
                    <el-form-item prop="username">
                        <el-input prefix-icon="User" type="text" v-model="data.form.username" placeholder="请输入登录账号"/>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input prefix-icon="Lock" show-password v-model="data.form.password" placeholder="请输入登录密码"/>
                    </el-form-item>
                    <el-form-item prop="usercode">
                        <el-input v-model="data.form.usercode" type="text" placeholder="输入验证码" style="width: 170px"/>
                        <img :src="data.url" alt="" style="height: 25px;margin-left: 10px;cursor: pointer;"
                             @click="changeVerify"/>
                    </el-form-item>
                    <el-form-item prop="role">
                        <el-select style="width: 100%" v-model="data.form.role">
                            <el-option value="ADMIN" label="管理员"></el-option>
                            <el-option value="TENANT" label="会员"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-button type="primary" style="width: 100%;" @click="login">登 录</el-button>
                    <div style="margin-top: 30px;text-align: right;">还没有账号? 请 <a href="/register">会员注册</a></div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup>

    import {reactive, ref} from "vue";
    import request from "@/utils/request.js";  //发送异步请求库
    import {ElMessage} from "element-plus";   // 弹出提示框架库
    import router from "@/router";         //路由配置

    const data = reactive({
        form: {role: 'ADMIN'},  //默认管理员
        url: import.meta.env.VITE_BASE_URL + '/createVerify',
        ip:''
    })

    //表单验证规则
    const rules = reactive({
        username: [
            {required: true, message: '请输入登录账号', trigger: 'blur'}
        ],
        password: [
            {required: true, message: '请输入密码', trigger: 'blur'}
        ],
        usercode: [{required: true, message: '请输入验证码', trigger: 'blur'}]
    })

    //提交登录请求验证表单
    const formRef = ref();

    //请求数据
    const loadIp = () => {
        //发送了一个Get请求，查询房源信息
        request.get("https://api.ipify.org?format=json", {
            params: {}
        }).then(res => {
            console.log("数据:" + JSON.stringify(res.ip));
            data.ip=res.ip;
            request.get("http://whois.pconline.com.cn/ipJson.jsp?ip="+res.ip+"&json=true", {
                params: {}
            }).then(res1 => {
                console.log("数据:" + JSON.stringify(res1.pro));

            })
        })
    };

    //获取IP地址
    loadIp();


    //提交登录请求
    const login = () => {
        //异步请求，发送Ajax
        formRef.value.validate((valid) => {
            if (valid) {
                //校验验证码是否正确
                request.post('/checkVerify?verify=' + data.form.usercode).then(result => {
                    console.log(JSON.stringify(result));
                    if (result) {
                        //验证码校验成功
                        if (data.form.role == 'TENANT') {
                            //如果输入正确，发送post请求
                            request.post('/member/login/'+data.ip, {
                                "uname": data.form.username,
                                "upass": data.form.password
                            }).then(res => {
                                console.log(JSON.stringify(res));
                                if (res.code === '200') {
                                    //向浏览器缓存中存储登录信息
                                    localStorage.setItem('login-user', JSON.stringify(res.data));
                                    //弹出一个提示框
                                    ElMessage.success('会员登录成功!');
                                    //路由到主页
                                    router.push('/home');
                                } else {
                                    //登录失败弹出错误消息！
                                    ElMessage.error(res.msg);
                                }
                            });
                        } else {
                            //如果输入正确，发送post请求
                            request.post('/admins/login/'+data.ip, data.form).then(res => {
                                console.log(JSON.stringify(res));
                                if (res.code === '200') {
                                    //向浏览器缓存中存储登录信息
                                    localStorage.setItem('login-user', JSON.stringify(res.data));
                                    //弹出一个提示框
                                    ElMessage.success('管理员登录成功!');
                                    //路由到主页
                                    router.push('/home');
                                } else {
                                    //登录失败弹出错误消息！
                                    ElMessage.error(res.msg);
                                }
                            });
                        }

                    } else {
                        ElMessage.error("验证码输入错误");
                    }
                })
            }
        })
    }

    //验证码切换
    const changeVerify = () => {
        data.url = import.meta.env.VITE_BASE_URL + '/createVerify?' + Math.random()
    }

</script>

<style scoped>
    .login-container {
        min-height: 100vh;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: url("@/assets/imgs/11111.jpg");
        background-size: cover;
    }

    .login-box {
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        border: 1px solid #ddd;
        padding: 30px;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.8);
    }
</style>
